<template> 
    <div class="set-user">
        <div class="user-cell">
            <div class="head-title clear-both">
                <span>头像</span> 
                <image class="head-img float-right"  :src="userDate.avatar?'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+userDate.avatar:'https://rqys.hleason.com/dist/images/plh.png'"></image>  
            </div>
            <zan-cell-group title-width="90">
                <zan-cell title="姓名" :value="userDate.user_name"></zan-cell> 
                <zan-cell title="性别" :value="userDate.sex==0?'男':'女'"></zan-cell>  
                <zan-cell title="账号安全" is-link url="./../set-phone/main"> </zan-cell> 
                <zan-cell title="我的收货地址" is-link url="./../site-list/main"> </zan-cell>
            </zan-cell-group>
        </div>
        <div class="footer">
            <div class="btn text-center" @click="toLogin">退出登录</div>
        </div>
    </div> 
</template>

<script> 
import * as api from '@/utils/api' 
export default {
    onShow(){ 
        // this.wxInfo=JSON.parse(wx.getStorageSync('wxInfo'));
        console.log(JSON.parse(wx.getStorageSync('userDate')));
        this.userDate=JSON.parse(wx.getStorageSync('userDate'));
        if(this.userDate.level=='level_one'){
            this.userDate.level_txt='游客'
        }else if(this.userDate.level=='level_two'){
            this.userDate.level_txt='初级会员'
        }else if(this.userDate.level=='level_three'){
            this.userDate.level_txt='高级会员'
        } 
    },
    data () {
        return {
            wxInfo:{},
            userDate:{},
            detailState:{}
        }
    },
    methods:{
        toLogin(){
            wx.setStorageSync('h_token', '');
            wx.setStorageSync('u_id', '');  
            let url='./../login/main';
            wx.reLaunch({url}); 
        },
    }, 
}

</script>
<style scoped lang="scss">
.set-user{
    .head-title{
        background:#fff;
        padding:12px 15px;
        span{
            font-size:28rpx;
            line-height:60rpx;
        }
        .head-img{
            width:60rpx;
            height:60rpx;
            border-radius:50%;
        }
    }
    .user-tabs{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:Center; 
        font-size:26rpx;
        background:#fff;
        padding:16rpx 0;
        .tab-item{
            flex:1;
            .info{
                color:#949494;
            }
        }
    }
    .user-cell{
        margin-top:20rpx;
        .icon-img{
            width:40rpx;
            height:40rpx;
            vertical-align: middle;
        }
        .cell-item{
            margin-top:10rpx;
        }
    }
    .footer{
        width:100%;
        margin-top:40rpx;
        font-size:30rpx;
        .btn{
            width:80%;
            padding:20rpx;
            box-sizing:border-box;
            margin:auto;
            background:#CD4640;
            color:#fff;
            border-radius:20rpx;
            &:active{
                background-color:rgba(205,70,64,0.5)
            }
        }
    }
}
</style> 
